<template>
    <div class="recommend-container">
        <div class="today-recommend-text">
            <span style="color: red; font-weight: bold">|</span> 今日推荐
        </div>
        <div class="today-recommend-list">
            <ul>
                <li>
                    <div class="today-recommend-list-img">
                        <img src=""/>
                    </div>
                    <div class="today-recommend-list-title">
                        <p>年仅 5 岁的 Rust 如何成为最受欢迎的编程语言？</p>
                    </div>
                </li>

                <li>
                    <div class="today-recommend-list-img">
                        <img src=""/>
                    </div>
                    <div class="today-recommend-list-title">
                        年仅 5 岁的 Rust 如何成为最受欢迎的编程语言？
                    </div>
                </li>
                <li>
                    <div class="today-recommend-list-img">
                        <img src=""/>
                    </div>
                    <div class="today-recommend-list-title">
                        年仅 5 岁的 Rust 如何成为最受欢迎的编程语言？
                    </div>
                </li>
                <li>
                    <div class="today-recommend-list-img">
                        <img src=""/>
                    </div>
                    <div class="today-recommend-list-title">
                        年仅 5 岁的 Rust 如何成为最受欢迎的编程语言？
                    </div>
                </li>
                <li>
                    <div class="today-recommend-list-img">
                        <img src=""/>
                    </div>
                    <div class="today-recommend-list-title">
                        年仅 5 岁的 Rust 如何成为最受欢迎的编程语言？
                    </div>
                </li>
            </ul>
        </div>


    </div>
</template>

<script>
    export default {
        name: "my-slider-right"
    }
</script>

<style scoped>
    .recommend-container {
        background: white;
        padding: 10px;
        /*width: 290px;*/
        float: right;
    }

    ul {
        /*width: 290px;*/
        display: inline-block;
        padding: 0;
        margin: 0;
    }

    li {
        /*width: 290px;*/
        height: 50px;
        list-style: none;
        /*text-align: center;*/
        display: inline-block;
        /*line-height: 50px;*/
        margin-bottom: 10px;
    }

    .today-recommend-text {
        float: left;
        margin-left: 10px;
        font-size: 18px;
        margin-bottom: 15px;
    }

    .today-recommend-list {
        float: left;
    }

    .today-recommend-list-img {
        float: left;
        border-radius: 5px;
        margin: 0;
        padding: 0;
        width: 65px;
        height: 50px;
        background: #333333;
    }

    .today-recommend-list-title {
        font-size: 10px;
        float: right;
        margin: 0;
        width: 210px;
        height: 50px;
        padding: 4px;
        background: #ffffff;
    }

</style>
